<template>
  <view>
    <view class="brand_detail_product-grid">
      <view class="brand_detail_product-item" v-for="item in productList" :key="item.id">
        <view class="brand_detail_product-badge">
          <image class="brand_detail_badge-image"
            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997751675ab4b772d26.png"
            mode="aspectFit"></image>
          <view class="brand_detail_badge-text">
            <view style="text-align: center;display: flex;justify-content:center;align-items:center;">  
              <text style="font-size: 20rpx;color: #D42A2A;">超值价￥</text>
              <text style="font-size: 28rpx;font-weight: 600;color: #D42A2A;">219</text>
            </view>
            <view style="font-size: 20rpx;" class="brand_detail_badge-goumai">购买</view>
          </view>
        </view>
        <view class="brand_detail_product-image">
          <image :src="item.image" mode="aspectFit"></image>
        </view>
        <view class="brand_detail_product-info">
          <text class="brand_detail_product-title">{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {
          id: 1,
          title: "臻味-1.01kg环球臻果",
          price: 219,
          image:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733991310675a9b8e1e838.png",
        },
        {
          id: 2,
          title: "臻味-1.8kg环球优品",
          price: 239,
          image:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733991310675a9b8e1e838.png",
        },
        {
          id: 2,
          title: "臻味-1.8kg环球优品",
          price: 239,
          image:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733991310675a9b8e1e838.png",
        },
        {
          id: 2,
          title: "臻味-1.8kg环球优品",
          price: 239,
          image:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733991310675a9b8e1e838.png",
        },
      ],
    };
  },
};
</script>

<style>
.brand_detail_badge-goumai {
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734000679675ac02716d62.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 56rpx;
  height: 56rpx;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D42A2A;
}

.brand_detail_product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50rpx;
  padding: 30rpx;
}

.brand_detail_product-item {
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997253675ab2c5cafff.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 408rpx;
}

.brand_detail_product-badge {
  position: absolute;
  left: 50%;
  bottom: -30rpx;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand_detail_badge-image {
  width: 256rpx;
  height: 64rpx;
}

.brand_detail_badge-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 216rpx;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand_detail_badge-text text {
  font-size: 24rpx;
  color: #333;
  display: block;
}

.brand_detail_product-image {
  width: 100%;
}

.brand_detail_product-image image {
 width: 280rpx;
 height: 280rpx;
}

.brand_detail_product-info {
  margin-top: 20rpx;
  text-align: center;
}

.brand_detail_product-title {
  font-size: 28rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
